<template>
	<view class="">
		<!-- 带搜索的许多商品页，根据来时的页面确定顶部标题是什么 -->
		<tabsTop tabName="合美供销"></tabsTop>
		<!-- 搜索框 -->
		<view class="search">
			<mySearch class="searchClick" @click="searchClick()" bgColor1="rgb(249,249,249)" bgColor2="#fff"></mySearch>
			<view class="title flex font-sm">
				<view :class="{'active': index == selectedIndex}" @click="titleClick(index)"
					v-for="(item,index) in sea_title" :key="index" class="py-3 px-3 flex align-center">
					{{item}}
					<!-- 排序 -->
					<view v-if="index==1" class="flex flex-column align-center ml-1">
						<!-- #99  待做缺接口 -->
						<!-- <uni-icons :color="up" type="top" size="10" style="margin-bottom: -8rpx;"></uni-icons>
						<uni-icons :color="down" type="bottom" size="10" style="margin-top: -10rpx;"></uni-icons> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 许多商品 -->
		<view class="product-list px-3 pt-1  bg-light">
			<view class="sign_row flex flex-wrap justify-between">
				<!-- 循环生成两个商品数据 -->
				<view class="bg-white mb-3 rounded-lg overflow-hidden" v-for="(item,index) in product" :key="index"
					style="width: 330rpx"
					@click="productClick(item.Article_Name,item.Article_SerialNumber,item.Sales_Unit_Price_SerialNumber,item.Store_SerialNumber,item.ShopColumn_Id)">
					<view class="w-100" style="height: 350rpx;">
						<image :src="Domain_IMG+item.Picture_URL" mode="aspectFit" :alt="item.name" class="img"></image>
					</view>
					<view class="px-2">
						<!-- 这行根据数据显示人气第几 -->
						<!-- <view class="product-name pt-2 font-sm"></view> -->
						<view class="">
							<text class="font text-ellipsis-2">{{item.Article_Name}}</text>
						</view>
						<view class="flex justify-between py-3">
							
							<!-- 商品价格 -->
							<view class="flex align-center align-center">
								<money :money="item.specifications[0].Sales_Unit_Price"></money>
							</view>
							<!-- 马上抢 -->
							<view>
								<button class="text-white rounded-circle font-sm"
									style="background-color: green;">马上抢</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="" v-if="product.length>5">
			<view class="py-2 pl-3 font-lg font-weight-bold bg-hover-light">
				猜你喜欢
			</view>
			<!-- 猜你喜欢的商品 -->
			<view class="">
				<view class="product-list pl-3 pt-1  bg-light w-100">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="sign_row flex flex-nowrap">
							<!-- 循环生成两个商品数据 -->
							<view class="bg-white mb-3 mr-3 rounded-lg overflow-hidden"
								v-for="(item,index) in product.slice(4,10)" :key="index"
								style="width: 330rpx;flex-shrink: 0;"
								@click="productClick(item.Article_Name,item.Article_SerialNumber,item.Sales_Unit_Price_SerialNumber,item.Store_SerialNumber,item.ShopColumn_Id)">
								<!-- 商品图片 -->
								<view class="w-100" style="height: 250rpx;">
									<image :src="Domain_IMG+item.Picture_URL" mode="aspectFit" :alt="item.name"
										class="img">
									</image>
								</view>
								<view class="px-2">
									<!-- 商品名 -->
									<view class="product-name pt-2 font-sm text-ellipsis">{{item.Article_Name}}
									</view>
									<view class="flex justify-between py-3 mt-2">
										<!-- 商品价格 -->
										<view class="flex align-center align-center">
											<money :money="item.specifications[0].Sales_Unit_Price"></money>
										</view>
										<!-- 购物车字体 -->
										<view style="width: 35rpx; height: 35rpx;">
											<image :src="Domain_IMG+'/shopcart.png'" mode="" class="img" style="">
											</image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 底部赞助信息 -->
		<botSponsor bg-height="350rpx"></botSponsor>
		<!-- 底部tab栏组件 -->
		<tabsBottom :tabId="NaN"></tabsBottom>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import money from "@/components/tool/money.vue"
	import mySearch from "@/components/mysearch/mysearch.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue"
	import {
		getGoods1All,
		getGoodsCountyAll
	} from "@/api/global.js"
	import {getWX3GoodsIdAction} from "@/api/index.js"
	export default {
		components: {
			tabsTop, //顶部标题组件
			tabsBottom, //底部tab组件
			mySearch, // 搜索组件
			botSponsor, // 底部赞助商
			money
		},
		data() {
			return {
				Domain_IMG: app.globalData.Domain_IMG,
				sea_title: ['综合', '价格', '上新'], //紧挨着搜索的标题
				up: "", // 价格
				down: '', // 价格
				selectedIndex: 0, // 当前选中的索引,默认第一个
				status: false,
				product: [],
				pro_form: {
					Article_Name: "",
					Category_SerialNumber: "",
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					ProvinceNumber: "",
					sort: 0,
					Province: "",
					County:"",
					Open_ID: app.globalData.Open_ID,
					Type: "0",
					page: 1, //页数
					limit: 10, //每页数据条数
				}

			}
		},
		onLoad(option) {
			this.getWX3GoodsIdAction(option.value)
			if (option.Province && option.index == '0') {
				this.pro_form.Province = option.Province;
				this.getData_pro(this.pro_form)
			} else if (option.Province && option.index == '1') {
				// //console.log(option.Province.split('市')[1].split('县')[0], '地址');
				if (option.Province.split('市')[1]) {
					this.pro_form.County = option.Province.split('市')[1].split('县')[0]
				} else {
					this.pro_form.County = option.Province.split('市')[0]
				}
				
				this.getData_city(this.pro_form)
			}
		},
		methods: {
			// 根据省份查商品
			async getData_pro(data) {
				//console.log(data);
				//分页查询所有供应数据
				// this.pro_form.page++;
				const res = await getGoods1All(data);
				//console.log(res, '商品');
				this.product=res.tableData;
			},
			async getData_city(data) {
				//分页查询所有供应数据
				// this.pro_form.page++;
				const res = await getGoodsCountyAll(data);
				//console.log(res, '商品');
				this.product=res.tableData;
			},
			//根据搜索查商品
			async getWX3GoodsIdAction(data) {
				var cs = {
					ShopColumn_Id:'',
					Article_Name: data,
					Category_SerialNumber:'',
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					page: 1,
					limit: 8,
					Open_ID:app.globalData.Open_ID
				}
				var res = await getWX3GoodsIdAction(cs);
				if (res) {
					//console.log(res);
					this.product = res.tableData;
					//console.log(res.tableData);
				}
			},
			searchClick() {
				// 点击搜索进入搜索页
				uni.navigateTo({
					//搜索页路径
					url: "./search",
				});
			},
			titleClick(index) {
				this.selectedIndex = index
				if (index == 1) {
					if (!this.up && !this.down) {
						this.up = '#0f0'
					} else if (this.up && !this.down) {
						this.up = '',
							this.down = '#0f0'
					} else if (!this.up && this.down) {
						this.up = '#0f0'
						this.down = ''
					}
				} else {
					this.up = '';
					this.down = '';
				}
			},
			// 点击商品,进入商品详情页
			// 点击商品,进入商品详情页
			productClick(name, Article_SerialNumber, Sales_Unit_Price_SerialNumber, Store_SerialNumber,ShopColumn_Id) {
				uni.navigateTo({
					url: "/pages/index/productDetails?name=" + name + "&Article_SerialNumber=" +
						Article_SerialNumber + "&Sales_Unit_Price_SerialNumber=" + Sales_Unit_Price_SerialNumber +
						"&Store_SerialNumber=" + Store_SerialNumber + "&ShopColumn_Id=" +ShopColumn_Id
				})
			},
		}
	}
</script>

<style lang="scss">
	.search {
		.title {
			justify-content: space-around;
		}
	}

	.active {
		color: green;
	}

	.scroll-view_H {
		white-space: nowrap;
		overflow: hidden;
	}
</style>